<template>
    <view class="container" :style="themeColor">
        <view class="main">
            <mescroll-uni
                v-if="loadOk"
                ref="mescrollRef"
                @init="mescrollInit"
                :height="listHeight"
                :down="downOption"
                @down="downRefresh"
                :up="upOption"
                @up="getData">
                <view class="head">
                    <text>全部评价（{{ totalNum }}）</text>
                </view>
                <comment-list-item v-for="(item, index) in datas" :key="index" :item="item"></comment-list-item>
            </mescroll-uni>
        </view>
    </view>
</template>
<script>
import commentListItem from "@/uni-sub-base/components/comment/list-item.vue"
import { getCommentListByProduct } from "@/service/api/product.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
export default {
    components: {
        commentListItem,
    },
    data() {
        return {
            datas: [],
            downOption: {
                use: false,
            },
            product_id: 0,
            listHeight: "",
            loadOk: false,
            totalNum: 0,
        }
    },
    mounted() {
        this.getListHeight()
    },
    onLoad(e) {
        this.product_id = e.product_id
    },
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".container", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
                //#ifndef MP
                setTimeout(() => {
                    this.refresh()
                }, 300)
                //#endif
            })
        },
        //获取列表数据
        getData(page) {
            let param = {
                size: page.size,
                page: page.num,
                product_id: this.product_id,
            }
            getCommentListByProduct(param).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endBySize(res.Data.Data.length, res.Data.RecordAmout)
                    this.datas = this.datas.concat(res.Data.Data)
                    this.totalNum = res.Data.RecordAmout
                } else {
                    this.mescroll.endBySize(0, 0)
                    this.easyToast(res.Msg)
                }
            })
        },
        //刷新
        refresh() {
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.head {
    height: 124rpx;
    display: flex;
    align-items: center;
    padding: 0 $app-page-padding;
    background: $color-white;
    margin-bottom: 12rpx;
    margin-top: 2rpx;
    text {
        font-size: $font-size-32;
        font-weight: 700;
    }
}
</style>
